<template>
  <ContentWrap>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="新技术申请规则" name="0">
        <el-table
          class="tables"
          v-loading="loading"
          :data="configList"
          row-key="id"
          v-if="refreshTable"
        >
          <el-table-column prop="name" label="技术类型">
            <template #default="scope">
              {{ scope.row.nodeType == '0' ? scope.row.name : '' }}
            </template>
          </el-table-column>
          <el-table-column prop="name" label="分类">
            <template #default="scope">
              {{ scope.row.nodeType !== '0' ? scope.row.name : '' }}
            </template>
          </el-table-column>
          <el-table-column label="允许申请" align="center" prop="checked">
            <template #default="scope">
              <el-checkbox
                v-model="scope.row.checked"
                @change="handleChecked(scope.row.checked, scope.column.property, scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column label="申请资质描述" align="center" prop="memo">
            <template #default="scope">
              <el-input
                v-if="scope.row.checked"
                v-model="scope.row.memo"
                @change="handleRemark(scope.row.memo, scope.column.property, scope.row)"
              />
              <span v-else></span>
            </template>
          </el-table-column>
          <!-- <el-table-column label="关联审批流" align="center" prop="aa">
            <template #default="scope">
              <el-checkbox-group v-model="scope.row.status">
                <el-checkbox value="0" />
              </el-checkbox-group>
            </template>
          </el-table-column> -->
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="资质授权规则" name="1">
        <el-table
          class="tables"
          v-loading="loading"
          :data="rightList"
          row-key="id"
          v-if="refreshTable"
        >
          <el-table-column prop="name" label="技术类型">
            <template #default="scope">
              {{ scope.row.nodeType == '0' ? scope.row.name : '' }}
            </template>
          </el-table-column>
          <el-table-column prop="name" label="分类">
            <template #default="scope">
              {{ scope.row.nodeType !== '0' ? scope.row.name : '' }}
            </template>
          </el-table-column>
          <el-table-column label="允许申请" align="center" prop="checked">
            <template #default="scope">
              <el-checkbox
                v-model="scope.row.checked"
                @change="handleChecked(scope.row.checked, scope.column.property, scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column label="申请资质配置" align="center" prop="memo">
            <template #default="scope">
              <el-button
                v-if="scope.row.nodeType !== '0'"
                v-hasPermi="['rule:configuration']"
                link
                type="primary"
                @click="handleConfig(scope.row)"
                >配置</el-button
              >
            </template>
          </el-table-column>
          <!-- <el-table-column label="关联审批流" align="center" prop="aa">
          <template #default="scope">
            <el-checkbox-group v-model="scope.row.status">
              <el-checkbox value="0" />
            </el-checkbox-group>
          </template>
        </el-table-column> -->
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <el-button
      v-hasPermi="['rule:save']"
      class="w-25 mt-10 relative left-[50%] -translate-x-2/4"
      type="primary"
      @click="handleSave"
      >保存</el-button
    >
  </ContentWrap>
  <SingleConfig ref="formRef" @success="getRightList()" />
</template>
<script lang="ts" setup>
import type { TabsPaneContext } from 'element-plus'
import * as Api from '@/api/qualification/index'
import { handleTree } from '@/utils/tree'
import SingleConfig from './singleConfig.vue'
const activeName: any = ref('0')
const loading = ref(true) // 列表的加载中
const configList = ref() // 列表的数据
const rightList = ref() // 列表的数据
const refreshTable = ref(true) // 重新渲染表格状态
const queryParams = reactive({})
const message = useMessage() // 消息弹窗
const handleClick = (tab: TabsPaneContext) => {
  activeName.value = tab.props.name
  if (activeName.value == '0') {
    getConfigList()
  } else {
    getRightList()
  }
}
const getGroupListTrees = (data: any) => {
  if (Array.isArray(data)) {
    return data.map((item) => getGroupListTrees(item))
  } else if (typeof data === 'object' && data !== null) {
    const result: any = {}
    for (let key in data) {
      if (key === 'checked') {
        result.checked = data[key] == '1'
      } else {
        result[key] = getGroupListTrees(data[key])
      }
    }
    return result
  } else {
    return data
  }
}
const getConfigList = async () => {
  loading.value = true
  try {
    const data = await Api.getNewTechConfig(queryParams)
    loading.value = false
    configList.value = getGroupListTrees(data.tree)
  } catch {
    loading.value = false
  }
}
const getRightList = async () => {
  loading.value = true
  try {
    const data = await Api.getTechAuthBasicList(queryParams)
    loading.value = false
    rightList.value = getGroupListTrees(data.tree)
  } catch {
    loading.value = false
  }
}

const formRef = ref()
const handleConfig = (row) => {
  formRef.value.open(row.id, row.basicId, row.isSingleConfig)
}

const handleSave = async () => {
  if (activeName.value == '0') {
    let params = {
      list: []
    }
    configList.value.map((v) => {
      let data = {
        id: v.id,
        checked: v.checked ? 1 : 0,
        memo: v.checked ? v.memo : '',
        configId: v.configId ? v.configId : undefined
      }
      params.list.push(data)
      if (v.children) {
        v.children.map((k) => {
          let data1 = {
            id: k.id,
            checked: k.checked ? 1 : 0,
            memo: k.checked ? k.memo : '',
            configId: k.configId ? k.configId : undefined
          }
          params.list.push(data1)
        })
      }
    })
    try {
      await Api.newTechApplyConfig(params)
      message.success('保存成功')
      getConfigList()
    } catch {}
  } else {
    let params = {
      list: []
    }
    rightList.value.map((v) => {
      let data = {
        id: v.id,
        checked: v.checked ? 1 : 0,
        basicId: v.basicId ? v.basicId : undefined
      }
      params.list.push(data)
      if (v.children) {
        v.children.map((k) => {
          let data1 = {
            id: k.id,
            checked: k.checked ? 1 : 0,
            basicId: k.basicId ? k.basicId : undefined
          }
          params.list.push(data1)
        })
      }
    })
    try {
      await Api.saveTechAuthBasic(params)
      message.success('保存成功')
      getRightList()
    } catch {}
  }
}

const handleChecked = (value, column, row) => {
  if (column && row) {
    row[column] = value
  }
}

const handleRemark = (value, column, row) => {
  if (column && row) {
    row[column] = value
  }
}

/** 初始化 **/
onMounted(async () => {
  try {
    await getConfigList()
  } catch {}
})
</script>
